<template>
  <div class="search-suggestion">
    <van-cell
      icon="search"
      v-for="(str, index) in suggestions"
      :key="index"
      @click="$emit('search', str)"
    >
      <div slot="title" v-html="highlight(str)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestions } from '@/api/search'
import { debounce } from 'lodash'

export default {
  name: 'SearchSuggestion',
  components: {},
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 联想建议数据列表
      suggestions: []
    }
  },
  computed: {},
  watch: {
    // 属性名：要监视的数据名称
    searchText: {
      // 当数据发生变化会执行 handler 处理函数
      handler: debounce(async function() {
        // 找到数据接口
        const { data } = await getSearchSuggestions(this.searchText)
        this.suggestions = data.data.options
        // 请求获取数据
        // 模板绑定展示
      }, 400),
      // 该回调将会在侦听开始之后被立即调用
      immediate: true
    }
  },
  created() {},
  mounted() {},
  // 方法集合
  methods: {
    highlight(str) {
      const highlights = `<span style="color:red">${this.searchText}</span>`

      // RegExp是正则表达式的构造函数
      // 参数1: 字符串
      // 参数2: 匹配模式
      // 返回值: 正则对象
      return str.replace(new RegExp(this.searchText, 'gi'), highlights)
    }
  }
}
</script>

<style lang="less" scoped></style>
